<template>
    <div>
        <h3>添加公告</h3>
        <input type="button" value="添加类型" class="btn btn-info" @click="addtype">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><span style="color: red;">*</span>标题</td>
                    <td>
                        <input type="text" v-model="query.title">
                    </td>
                </tr>
             
                <tr>
                    <td>公告内容</td>
                    <td>
                       <textarea cols="50" rows="5" v-model="query.desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>公告图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="query.img" alt="" width="100" height="100" v-if="query.img!=''">
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">*</span>状态</td>
                    <td>
                        <input type="radio" name="state" value="1" v-model="query.state">显示
                        <input type="radio" name="state" value="0" v-model="query.state">隐藏
                    </td>
                </tr>
             
                <tr>
                    <td><span style="color: red;">*</span>类型</td>
                    <td>
                        <select v-model="query.typeId">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="item in xiala.list">{{ item.typeName }}</option>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-info" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
const Route=useRoute();
const Router=useRouter();

onMounted(()=>{
    showServer()
})
const addtype=()=>{
    Router.push('/gtypeAdd')
}
//上传门店图片1
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        method:'post',
        url:'/api/Img/UpFile',
        data:f,

    })
    .then(res=>{
        console.log(res);
        query.img=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//下拉框
const xiala:any=reactive({
    list:[]
})
const showServer=()=>{
    axios({
        method:'get',
        url:'/api/GongGao/GetGTypes'
    })
    .then(res=>{
        console.log(res);
        xiala.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//添加
const query=reactive({

  "typeId": '',
  "title": "",
  "desc": "",
  "img": "",
  "state": '',

})
const ok=()=>{
    if(query.title==""){
        alert("标题不能为空");
        return;
    }
    var m=/^[\u4e00-\u9fa5]{1,20}$/;
    if(m.test(query.title)==false){
        alert("公告标题应是20以内的中文汉字");
        return;
    }
    if(query.desc.length>50){
        alert("公告标题内容应不大于50个字");
        return;
    }
    if(query.state==""){
        alert("状态不能为空");
        return;
    }
    if(query.typeId==""){
        alert("类型不能为空");
        return;
    }
    axios({
        method:'post',
        url:'/api/GongGao/GongGaoAdd',
        data:query,
    })
    .then(res=>{
        console.log(res);
       if(res.data>0){
        alert("添加成功");
        Router.push('/gonggaoShow')
        return;
       }
       else{
        alert("添加失败");
       }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>